<template>
  <div>
    <header>
      <h1>原型版本1.0</h1>
    </header>
    <aside>主体部分（左中右布局）{{ test }}</aside>
    <main class="container">
      <el-card class="left-group">
        <!-- 组件列表集合 -->
        <auxiliary @change="change"></auxiliary>
      </el-card>
      <center :componentList="componentList"></center>
      <el-card class="right-group">
        <template #header>
          <div class="clearfix">
            <span>right-group</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
        </template>
        <div v-for="o in 4" :key="o" class="text item">
          {{ '列表内容 ' + o }}
        </div>
      </el-card>
    </main>
    <footer>
      copyRight @1.0
      <address>address语义化</address>
    </footer>
  </div>
</template>
<script lang="ts">
  // 在vue2中 data 在vue3中使用 reactive代替
  import { reactive, computed, toRefs } from 'vue'
  import { useRouter } from 'vue-router'
  import auxiliary from '../../components/Auxiliary/auxiliary.vue'
  import center from '../../components/center-box/center.vue'
  import { useStore, mapState } from 'vuex'
  export default {
    // 组件注册
    components: { auxiliary, center },
    // setup相当于vue2.0的 beforeCreate和 created，是vue3新增的一个属性，所有的操作都在此属性中完成
    // 通过reactive 可以初始化一个可响应的数据，与Vue2.0中的Vue.observer很相似
    setup(props: any, context: any) {
      // 获取vuex的模型
      const store: any = useStore()
      const state = reactive({
        todoList: [
          {
            id: 1,
            done: false,
            text: '吃饭',
          },
          {
            id: 2,
            done: false,
            text: '睡觉',
          },
          {
            id: 3,
            done: false,
            text: '打豆豆',
          },
        ],
        todo: '',
        componentList: new Array<Array<any>>()
      })
      // 使用计算属性生成待办列表
      const todos = computed(() => {
        return state.todoList.filter((item) => !item.done)
      })

      // 使用计算属性生成已办列表
      const dones = computed(() => {
        return state.todoList.filter((item) => item.done)
      })

      // 修改待办状态
      const handleChangeStatus = (item: { done: any }, status: any) => {
        item.done = status
      }

      const test = computed(() =>{
        return store.state.userName
      })
      // const test = computed(() =>{
      //   debugger
      //   return ...mapState({
      //     // map this.count to store.state.count
      //      'userName':store=>store.userName
      //   })
      // })
      // 新增待办
      const change = (type: string) => {
        state.componentList.push([{name: type}])
      }

      // 在Vue3.0中，所有的数据和方法都通过在setup 中 return 出去，然后在template中使用
      return {
        ...toRefs(state),
        todos,
        test,
        dones,
        handleChangeStatus,
        change,
      }
    },
  }
</script>
<style scoped>
  .container {
    display: flex;
  }
  .left-group,
  .right-group {
    width: 200px;
    height: 500px;
    text-align: center;
    padding: 0 10px;
  }
  .mid-group {
    flex: 1;
    text-align: center;
    border: 1px solid rgb(129, 129, 129);
    border-radius: 1%;
  }
</style>
